{% include "header.html" %}
<span style="font-family:Times New Roman; font-size:45px;">Analytics</span><br /><br />
<span style="background-color:#99ff33;">~</span> User was incorrect
<span style="background-color:#ff6666;">~</span> User was correct
<a href="#results" style="color:blue; padding-left:100px;">Jump to results</a>
<table border="0">
    <tr style="background-color:#999;">
        <th>ID</th>
        <th>Time till selection</th>
        <th>Reasons for selection</th>
        <th>User</th>
    </tr>
{% for i in interactions %}
    {% if i.num_images > 0 %}
    <tr style="background-color:#99ff33;">
    {% else %}
    <tr style="background-color:#ff6666;">
    {% endif %}
    <td>[<a href="/safc/deepanalytics/{{ i.id }}">Select</a>] {{ i.id }}</td>
    <td>{{ i.milli }}</td>
    <td>{{ i.selections }}</td>
    <td><a href="/admin/auth/user/{{ i.user_id_ref }}/">{{ i.ref_user}}</a> ({{ i.datetime }})</td>
    </tr>
{% endfor %}
</table>
<hr />
<div id="results"></div>
<script type="text/javascript">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawBarChart);
    google.setOnLoadCallback(drawReason);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Effectiveness');
        data.addColumn('number', 'Value');
        data.addRows([
            ['Effective',{{ yes_mods }}],
            ['Not Effective',{{ no_mods }}]
        ]);
        var options = {'title':'Algorithm Effectiveness',
            'width':300,
            'height':200,
            'titleTextStyle':{fontName:'Times New Roman', fontSize:16},
            'is3D':true,
            'colors':['#99FF33','#FF6666'],
            'legend':'top'};
        
        var chart = new google.visualization.PieChart(document.getElementById('pie_charty'));
        chart.draw(data, options);
    }
    /*
    function drawBarChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Seconds');
        data.addColumn('number', 'Interactions');
        data.addRows(2);
        data.setValue(0, '1');
        data.setValue(0, 3);
        data.setValue(0, '2');
        data.setValue(1, 5);
        
        var chart = new google.visualization.ColumnChart(document.getElementById('bar_charty'));
        chart.draw(data, {width:550, height:267, title: 'Seconds Spent Choosing',
            hAxis: {title: 'Seconds', titleTextStyle: {color: 'green'}}
        });
    }*/
    
    function drawBarChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Seconds');
        data.addColumn('number', 'Interactions');
        var pts_array = {{ spots }};
        data.addRows(pts_array.length);
        for (var i = 0; i < pts_array.length; ++i){
            data.setValue(i, 0, (i+1).toString());
            data.setValue(i, 1, pts_array[i]);
        }
        
        var options = {width: 550,
        height: 257,
        title: 'Seconds Spent Choosing',
        hAxis: {title: 'Seconds', titleTextStyle: {color: 'grey'}, showTextEvery: 2},
        titleTextStyle: {fontName: 'Times New Roman',fontSize:16},
        legend:'top',
        colors:['blue'],
        seriesType: 'area'
                         }
        
        var chart = new google.visualization.ComboChart(document.getElementById('bar_charty'));
        chart.draw(data, options);
    }
    
    function drawReason() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Nose');
        data.addColumn('number', 'Interactions');
        var pts_array = {{ selections }};
        data.addRows(6);
        data.setValue(0, 0, 'Nose');
        data.setValue(0, 1, pts_array[0]);
        data.setValue(1, 0, 'Ear(s)');
        data.setValue(1, 1, pts_array[1]);
        data.setValue(2, 0, 'Hair');
        data.setValue(2, 1, pts_array[2]);
        data.setValue(3, 0, 'Markings');
        data.setValue(3, 1, pts_array[3]);
        data.setValue(4, 0, 'Wrinkles');
        data.setValue(4, 1, pts_array[4]);
        data.setValue(5, 0, 'Eyebrow(s)');
        data.setValue(5, 1, pts_array[5]);
        
        var options={
        width: 300,
        height: 200,
        title: 'Selected Reasons',
        titleTextStyle: {fontName: 'Times New Roman',fontSize:16},
        legend: 'top'
        };
        
        var chart = new google.visualization.BarChart(document.getElementById('selection_charty'));
        chart.draw(data, options);
    }

</script>
<table border="0">
    <tr>
        <td><div id="pie_charty"></div></td>
        <td><div id="selection_charty"></div></td>
    </tr>
    <tr>
        <td colspan="2"><div id="bar_charty"></div></td>
    </tr>
</table>
<!--<img src="http://chart.apis.google.com/chart?chxl=2:|Interactions|3:|Seconds&chxp=2,50|3,15&chxr=0,0,125|1,1,30|2,0,120|3,0,30&chxs=0,676767,9.5,0,l,676767|1,676767,9.5,0,lt,676767&chxt=y,x,y,x&chbh=a,2,3&chs=550x267&cht=bvg&chco=3072F3&chd=t:{{ secs_list }}&chp=0&chg=0,5,0,0&chtt=Seconds+Spent+Choosing" />-->
{% include "footer.html" %}
